<template>
    <div class="recommend">
        <!--热销推荐标题-->
        <div class="recommend-title">猜你喜欢</div>
        <!--列表-->
        <div class="recommend-list">
            <ul>
                <router-link tag="li" class="list-item" v-for="(item ,index) of list" :key="index" :to="`/detail/${item.id}`">
                    <img :src="item.imgUrl" alt="">
                    <div class="info">
                        <p class="title">{{item.title}}</p>
                        <p>{{item.pinglun}}</p>
                        <button>查看详情</button>
                    </div>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Recommend',
    data(){
      return {
        list: [
          {
            imgUrl:'http://img1.qunarzz.com/sight/p0/1508/a5/4003f9dd7bebf61eccbf64046e26d487.water.jpg_200x200_7690e4cd.jpg',
             title: '北京欢乐谷',
             pinglun: '1313条评论',
            id: 0,
          },
          {
            imgUrl:'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg',
             title: '故宫',
             pinglun: '1313条评论',
            id: 1,
          },
          {
            imgUrl:'http://img1.qunarzz.com/sight/p0/1507/36/ce3d2d6c9ab44d67ae68d940b8781829.water.jpg_200x200_0938a8f2.jpg',
             title: '北京野生动物园',
             pinglun: '1313条评论',
            id: 2,
          },
          {
            imgUrl:'http://img1.qunarzz.com/sight/p0/1505/d2/d274c92de14c93da.water.jpg_200x200_2cce447f.jpg',
             title: '颐和园',
             pinglun: '1313条评论',
            id: 3,
          },
        ]
      }
    }
  }
</script>

<style scoped lang="stylus">
.recommend {
   .recommend-title {
       line-height:0.8rem;
       background-color: #eee;
       text-indent:0.4rem;
   }
    .recommend-list {
        box-sizing: border-box;
        padding: 0.2rem;
        ul {
            .list-item {
                display: flex;
                overflow: hidden;
                height:1.9rem;
                margin-bottom: 0.5rem;
                img {
                    width:2rem;
                    height:2rem;
              
                }
                .info {
                    box-sizing: border-box;
                    padding-left: 0.2rem;
                    p {
                        line-height:.6rem;
                    }
                    button {
                        background-color: #ff9300;
                        margin-top:0.2rem;
                        -webkit-border-radius: 0.06rem;
                        -moz-border-radius: 0.06rem;
                        border-radius: 0.06rem;
                        text-align: center;
                        padding: 0.05rem 0.1rem;
                        color: #fff;
                        font-size:12px;
                    }
                }
            }
        }
    }
}
</style>